<template>
  <div class="border m-2 bg-gray-100/30 p-2 rounded">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="border-b" :key="index" v-for="(item, index) in datas">
        <div class="text-yellow-300 flex-1">{{ item.title }}：</div>
        <div class="flex-auto flex justify-between text-sm">
          <div class="text-white flex-1">
            收款笔数：
            <span class="text-red-500">{{ item.successOrder }}</span>
          </div>
          <div class="text-yellow-300 flex-1">
            今日返佣：
            <span class="text-red-500">{{ item.successGain }}</span>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script setup lang="ts">
import { getCollectionIndexApi } from '@/apis/collection'
import { ref } from 'vue'

const loading = ref(false)
const finished = ref(false)
const page = ref(1)
const datas = ref([])

const onLoad = async () => {
  loading.value = true
  const { list } = await getCollectionIndexApi({ page: page.value, pageSize: 20 })
  if (list.length) {
    datas.value.push(...list)
    page.value++
    loading.value = false
  } else {
    finished.value = true
  }
}
</script>
